<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div id="app">
    <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/user">User</router-link></li>
        <li><router-link to="/profile">Profile</router-link></li>
    </ul>
    <!--路由匹配到的组件将会渲染在此组件中-->
    <router-view></router-view>
   </div>
   <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
   <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script> 
   <script>
    var Home = {template:'<div>Home</div>'};
    var User = {template:'<div>User</div>'};
    var Profile = {template:'<div>Profile</div>'};
    //编写路由配置对象数组，每个对象里规定了什么路径对应什么组件
    var routes = [
        {path:'/',component:Home},
        {path:'/user',component:User},
        {path:'/profile',component:Profile}
    ]
    //创建一个VueRouter类的实例，选项对象里有一个routes配置数组
    var router = new VueRouter({
        routes
    });
    console.log(router)
    var vm = new Vue({
        el:'#app',
        router,   //this.$router
    });
   </script>
</body>
</html>